<template>
	<div :class="classNames">
		<template v-if="items.length > 0">
			<div class="control-content app-control-kanban__content">
				<template v-for="group in items" :key="group.srfkey">
					<div
						:class="{
							'app-control-kanban__content__group': true,
							'app-control-kanban__content__group__close': !computedOpen(
								group.srfkey
							),
						}"
					>
						<div class="group__foldingarea">
							<div
								class="group__foldingarea__header"
								@click="toggleKanBan(group.srfkey)"
							>
								<div class="foldingarea__header__icon">
									<MenuFoldOutlined v-if="computedOpen(group.srfkey)" />
									<MenuUnfoldOutlined v-else />
								</div>
								<span class="foldingarea__header__title">{{
									group.srfmajortext
								}}</span>
								<slot v-if="hasSlot('groupAction')" :data="group"></slot>
							</div>
							<draggable
								v-show="computedOpen(group.srfkey)"
								:list="group.children"
								group="bar"
								handle=".foldingarea__content__item"
								class="group__foldingarea__content"
								@change="onDragChange($event, group)"
								@end="onDragEnd()"
							>
								<template #item="{ element }">
									<div
										:class="getKanBanItemClassNames(element)"
										@click="handleClick(element, $event)"
										@dblclick="handleDbClick(element, $event)"
									>
										<slot v-if="hasSlot('panelItem')" :data="element"></slot>
										<span class="kanban-text">{{ element.srfmajortext }}</span>
									</div>
								</template>
								<template #footer>
									<div
										v-if="group.children.length == 0"
										class="foldingarea__content__empty"
									>
										<span>{{ getLocale.emptyText }}</span>
									</div>
								</template>
							</draggable>
						</div>
					</div>
				</template>
			</div>
		</template>
		<template v-else>
			<AppEmptyDataTip
				:emptyText="$t(emptyTextPSLanguageRes, emptyText)"
			></AppEmptyDataTip>
		</template>
	</div>
</template>
<script setup lang="ts">
import { KanBanProps, IKanBanItem } from './kanban';
import draggable from 'vuedraggable';
import { IParam } from '@/core';
import { Ref } from 'vue';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import AppEmptyDataTip from '@/components/common/empty-data-tip/src/empty-data-tip.vue';
const props = defineProps(KanBanProps);

const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: IKanBanItem, event: MouseEvent): void;
	(name: 'itemDbClick', item: IKanBanItem, event: MouseEvent): void;
	(name: 'drag-change', evt: any, itemName: string): void;
	(name: 'DragEnd'): void;
}>();

const kanbanItems: Ref<any[]> = ref([]);

const classNames = computed(() => {
	return {
		'app-control-kanban__row': true,
	};
});

const onDragChange = (evt: any, group: any) => {
	emit('drag-change', evt, group);
};
const onDragEnd = () => {
	emit('DragEnd');
};

//  获取显示文本
const getLocale = computed(() => {
	return {
		emptyText:
			App.ts(props.emptyTextPSLanguageRes, props.emptyText) ||
			App.ts('widget.kanban.nodata', '暂无数据'),
	};
});

const data: Ref<IKanBanItem[]> = ref([]);
watch(
	() => props.items,
	() => {
		data.value.length = 0;
		props.items.forEach((item: IParam) => {
			data.value.push(item as IKanBanItem);
		});
	},
	{ immediate: true }
);

const getSelected = (item: IKanBanItem): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

//  获取看板部件项类名
const getKanBanItemClassNames = (item: IKanBanItem) => {
	return {
		foldingarea__content__item: true,
		'is-active': getSelected(item),
	};
};

//点击展开/关闭看板
const toggleKanBan = (value: any) => {
	const index = kanbanItems.value.indexOf(value);
	if (index < 0) {
		kanbanItems.value.push(value);
	} else {
		kanbanItems.value.splice(index, 1);
	}
};

const computedOpen = (value: any) => {
	return kanbanItems.value.indexOf(value) < 0 ? true : false;
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleClick = (item: IKanBanItem, event: MouseEvent) => {
	//  其他行抛出点击事件
	emit('itemClick', item, event);
};

const handleDbClick = (item: IKanBanItem, event: MouseEvent) => {
	emit('itemDbClick', item, event);
};
</script>
